<template>
    <div class="router-item-page">
        <div class="options-view">
            <el-button type="primary" size="small">新增</el-button>
        </div>
        <div class="table-view">
            <div class="table-list">
                <el-table row-key="id" :data="tableData" border style="width: 100%;height:100%">
                    <el-table-column prop="username" label="账号" width=160 />
                    <el-table-column prop="nickname" label="用户名" width=160 />
                    <el-table-column prop="avatar" label="头像" width=80>
                        <template #default="scope">
                            <img :src="scope.row.avatar" class="table-image">
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" width=200 />
                    <el-table-column prop="mobile" label="手机号" width=160 />
                    <el-table-column prop="status" label="状态" width=80>
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>
                            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
                            <el-tag v-if="scope.row.status == 2" type="warning">锁定</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width=240 />
                    <el-table-column prop="update_time" label="更新时间" width=240 />
                    <el-table-column label="操作" width=220 fixed="right">
                        <template #default="scope">
                            <el-button v-if="scope.row.status == 1" type="warning" size="small"
                                @click="lock(scope.row)">锁定</el-button>
                            <el-button v-if="scope.row.status == 1" type="danger" size="small"
                                @click="disable(scope.row)">禁用</el-button>
                            <el-button v-if="scope.row.status == 0" type="success" size="small"
                                @click="enable(scope.row)">启用</el-button>
                            <el-button v-if="scope.row.status == 2" type="primary" size="small"
                                @click="unlock(scope.row)">解锁</el-button>
                            <el-button type="success" size="small" @click="openEdit(scope.row.id)">权限</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-helper">
                <el-pagination background layout="prev, pager, next" :total="totle" />
            </div>
        </div>
    </div>

    <el-dialog v-model="showEdit" width="360" style="padding:  0 48px 48px 24px;">
        <div class="dialog-title">修改</div>
        <div>
            <el-switch v-for="role in userRoles" v-model="role.checked" :loading="userRolesLoading"
                class="role-item-switch" size="small" :active-text="role.name" @change="changeRole(role)"
                style="--el-switch-off-color: #ff4949" />
        </div>
    </el-dialog>

    <el-dialog v-model="showDelete" width="400" style="padding:  0 48px 48px 24px;">
        <div class="dialog-title">删除</div>
        <el-form :model="deleteObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="deleteObj.name" disabled class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="deleteObj.icon" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="上级">
                <el-input v-model="deleteObj.father" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="deleteObj.path" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="重定向">
                <el-input v-model="deleteObj.redirect" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureDelete">确 定</el-button>
            <el-button @click="showDelete = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showIcons" width="800" style="padding:  24px 24px 24px 36px;">
        <component v-for="icon in icons" :is="icon" class="icon-item" @click="selectIcon(icon)" />
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import apis from '@apis'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const tableData = ref([])
// 原始角色列表
const roles = ref([])
// 选择的用户的角色列表
const userRoles = ref([])
// 用户角色修改中loading
const userRolesLoading = ref(false)
const pageOptions = ref([])
const totle = ref(0)
const pageSize = 10
const currentPage = ref(1)


const editObj = ref({})
const showEdit = ref(false)
const openEdit = (id) => {
    showEdit.value = true
    const rolesTemp = JSON.parse(JSON.stringify(roles.value))
    apis.user_roles.getRolesByUserId(id).then(res => {
        userRoles.value = []
        for (let index = 0; index < rolesTemp.length; index++) {
            let had = false
            const r1 = rolesTemp[index]
            for (let j = 0; j < res.roles.length; j++) {
                const r2 = res.roles[j]
                if (r1.id == r2.id) {
                    had = true
                }
            }
            userRoles.value.push({
                ...r1,
                checked: had,
                user_id: id
            })
        }
        console.log(userRoles.value)
    })
}
const sureEdit = () => {
    apis.pages.update(editObj.value).then(res => {
        showEdit.value = false
        initTableList()
    })
    showEdit.value = false
}

// 选中上级之后帮用户输入上级的路径
const selectFather = (val) => {
    if (val != 0) {
        let father = tableData.value.filter(item => item.id == val)[0]
        createObj.value.path = father.path + '/'
        editObj.value.path = father.path + '/'
    }
}

const deleteObj = ref({})
const showDelete = ref(false)
const openDelete = (row) => {
    showDelete.value = true
    deleteObj.value = row
}
const sureDelete = () => {
    apis.pages.delet(deleteObj.value.id).then(res => {
        showDelete.value = false
        initTableList()
    })
}

const showIcons = ref(false)
const icons = ref([])

const lock = (row) => {
    apis.users.lock(row.id).then(res => {
        initTableList()
    })
}
const disable = (row) => {
    apis.users.disable(row.id).then(res => {
        initTableList()
    })
}
const enable = (row) => {
    apis.users.enable(row.id).then(res => {
        initTableList()
    })
}
const unlock = (row) => {
    apis.users.unlock(row.id).then(res => {
        initTableList()
    })
}
// 修改用户角色
const changeRole = (role) => {
    userRolesLoading.value = true
    if (role.checked) {
        apis.user_roles.addRoleToUser(role.user_id, role.id).then(res => {
            setTimeout(() => {
                userRolesLoading.value = false
            }, 500)
        })
    } else {
        apis.user_roles.removeRoleFromUser(role.user_id, role.id).then(res => {
            setTimeout(() => {
                userRolesLoading.value = false
            }, 500)
        })
    }
}
const initTableList = () => {
    apis.roles.gets().then(res => {
        tableData.value = res.roles
    })
}
const initIcons = () => {
    for (const [key] of Object.entries(ElementPlusIconsVue)) {
        icons.value.push(key)
    }
}
const initRoles = () => {
    apis.roles.gets().then(res => {
        roles.value = res.roles
    })
}
onMounted(() => {
    initTableList()
    initIcons()
    initRoles()
})
</script>

<style scoped>
.role-item-switch {
    width: 50%;
    padding-left: 20px;
    margin: 8px 0;
    user-select: none;
}
</style>